<template>
	<view class="container">
		<view v-if="!payTypeSelectorVisible" class="pwdBg" :class="allH?'allH':'halfH'">
			<view v-if="hasPwd" class="pwdBox">
				<view class="pwdHeader margin_b16 flex_r_sb_c">
					<view class="pwdHeaderLeft flex_2 flex_r_fs_c" @click.stop="closeSafekey">
						<text class="iconfont iconerror f_28 tc_w"></text>
					</view>
					<view class="pwdHeaderTitle f_28 fw_500 tc_w flex_4 flex_r_c_c">
						<text>{{verification === 1? '请输入支付密码':''}}</text>
					</view>
					<view class="pwdHeaderRight f_28 fw_500 flex_2 flex_r_fe_c" @click.stop="switchVerification">
						<!-- <text>{{verification === 1? '使用指纹':'使用密码'}}</text> -->
					</view>
				</view>
				<view class="pwdCnt flex_c_c_c">
					<view v-if="paymentInfo.targetId" class="f_32 fw_500 tc_w text_line_2 textA_c margin_b8">向{{paymentInfo.targetName}}转账</view>
					<view v-else class="f_32 fw_500 tc_w textA_c margin_b8">支付</view>
					<view class="flex_r_c_c">
						<text class="f_28 fw_600 tc_w margin_r12">¥</text>
						<text class="f_52 fw_600 tc_w">{{paymentInfo.amount}}</text>
					</view>
				</view>
				<view class="pwdPayType margin_b28 flex_r_sb_c">
					<text class="f_28 fw_500 tc_9">支付方式</text>
					<view class="f_28 fw_500 tc_w" @click.stop="selectPayType">
						<text class="margin_r8">{{curPayTypeName}}</text>
						<text class="iconfont iconrightArrow f_24 tc_9"></text>
					</view>
				</view>
				<view class="pwdInput margin_b24">
					<view class="pwdInputBg w100 h100 flex_r_fs_c">
						<block v-for="(item, index) in pwdBox" :key="index">
							<view class="pwdInputItem" :class="index===pwdBox.length-1?'':'margin_r12'"></view>
						</block>
					</view>
					<view class="pwdInputUp w100 h100 flex_r_fs_c">
						<block v-for="(item, index) in pwdInputBox" :key="index">
							<view class="pwdInputItem f_72 fw_500 tc_w flex_c_c_c" :class="index===6?'':'margin_r12'">·</view>
						</block>
					</view>
				</view>
			</view>
			<view v-else class="pwdBox_set">
				<view class="pwdHeader margin_b16 flex_r_sb_c">
					<view class="pwdHeaderLeft flex_2 flex_r_fs_c"></view>
					<view class="pwdHeaderTitle f_28 fw_500 tc_w flex_4 flex_r_c_c">
						<text>您还未设置密码</text>
					</view>
					<view class="pwdHeaderLeft flex_2 flex_r_fe_c" @click.stop="closeSafekey">
						<text class="iconfont iconerror f_28 tc_w"></text>
					</view>
				</view>
				<view class="pwdCnt flex_c_c_c">
					<view class="setPwd f_32 fw_500 tc_w text_line_2 textA_c margin_b8" @click.stop="setPwd">设置密码</view>
				</view>
			</view>
			<view v-if="!allH" class="keyBox">
				<view class="btnLine flex_r_sb_c">
					<view class="singleBtn b_b" @click.stop="keyboardInput(1)">1</view>
					<view class="singleBtn b_b b_r b_l" @click.stop="keyboardInput(2)">2</view>
					<view class="singleBtn b_b" @click.stop="keyboardInput(3)">3</view>
				</view>
				<view class="btnLine flex_r_sb_c">
					<view class="singleBtn b_b" @click.stop="keyboardInput(4)">4</view>
					<view class="singleBtn b_b b_r b_l" @click.stop="keyboardInput(5)">5</view>
					<view class="singleBtn b_b" @click.stop="keyboardInput(6)">6</view>
				</view>
				<view class="btnLine flex_r_sb_c">
					<view class="singleBtn b_b" @click.stop="keyboardInput(7)">7</view>
					<view class="singleBtn b_b b_r b_l" @click.stop="keyboardInput(8)">8</view>
					<view class="singleBtn b_b" @click.stop="keyboardInput(9)">9</view>
				</view>
				<view class="btnLine flex_r_sb_c">
					<view class="singleBtn b_b">
						<!-- <text>.</text> -->
					</view>
					<view class="singleBtn b_b b_r b_l" @click.stop="keyboardInput(0)">0</view>
					<view class="singleBtn b_b" @click.stop="backspace">
						<text class="iconfont iconbackspace f_48"></text>
					</view>
				</view>
			</view>
		</view>
		<fr-paytype-selector v-if="payTypeSelectorVisible" :payType="payType" :curPayType="curPayType" @handleSelect="handleSelect" @handleClose="handleClose"></fr-paytype-selector>
	</view>
</template>

<script>
	export default {
		name:"fr-safekey-pwd",
		props: {
			// 相关支付信息
			paymentInfo: {
				type: Object,
				default: function() {
					return {}
				}
			},
			// 是否设置了密码
			hasPwd:{
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				allH: false,
				pwdBox: ['', '', '', '', '', ''],
				pwdInputBox: [],
				payType: [
					{id: '01', name: '零钱', value: 1, amount: '60.00', msg: '', icon:'iconpocketmoney', able: true},
					{id: '02', name: '零钱通', value: 2, amount: '1717.66', msg: '', icon:'iconpocketmoney', able: true},
					{id: '03', name: '招商银行储蓄卡', value: 3, cardNo: '1111', msg: '', icon:'iconunionPay', able: true},
					{id: '04', name: '工商银行储蓄卡', value: 4, cardNo: '2222', msg: '', icon:'iconunionPay', able: true},
					{id: '05', name: '广发银行信用卡', value: 5, cardNo: '3333', msg: '当前交易无法使用该信用卡', icon:'iconunionPay', able: false},
				],
				payTypeSelectorVisible: false,
				curPayType: 2,
				curPayTypeName: '零钱通',
				verification: 1, // 验证方式 1 => 密码, 2 => 指纹
			};
		},
		watch:{
			pwdInputBox:'emitPwd',
			hasPwd: 'setHeight'
		},
		mounted() {
			this.setHeight()
		},
		methods: {
			keyboardInput(e) {
				this.pwdInputBox.length < 6 ? this.pwdInputBox.push(e) : null
			},
			backspace() {
				this.pwdInputBox.pop()
			},
			emitPwd(){
				// 监听完成输入6位密码后发出
				if(this.pwdInputBox.length === 6){
					const pwd = this.pwdInputBox.join('')
					this.$emit('finishTyping',{
						pwd: pwd
					})
					this.pwdInputBox = []
				}
			},
			closeSafekey() {
				this.$emit('closeSafekey')
			},
			setPwd() {
				this.$emit('closeSafekey')
				this.$tool.msg('跳转设置密码页')
			},
			selectPayType() {
				this.payTypeSelectorVisible = true
			},
			handleSelect(e) {
				this.curPayType = e.value
				// this.curPayTypeName = e.amount? e.name : e.name + '(' + e.cardNo + ')'
				this.curPayTypeName = e.amount? e.name : `${e.name}(${e.cardNo})`
				this.payTypeSelectorVisible = false
			},
			handleClose() {
				this.payTypeSelectorVisible = false
			},
			setHeight() {
				this.allH = !this.hasPwd
			},
			switchVerification() {
				this.verification = this.verification === 1? 2:1
				this.allH = !this.allH
			},
		},
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: calc(100vh - var(--window-top));
	.pwdBg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		// height: 100%;
		// height: calc(100vh - 480rpx);
		background:rgba(0,0,0,0.7);
		.pwdBox {
			width: 600rpx;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			background-color: #2c2c2c;
			border-radius: 24rpx;
			position: fixed;
			// bottom: 540rpx;
			bottom: 50%;
			left:50%;
			transform: translate(-50%, 0%);
			.pwdHeader {
				width: 100%;
				height: 60rpx;
				.pwdHeaderLeft {}
				.pwdHeaderTitle {}
				.pwdHeaderRight {
					color: #8a9bab;
				}
			}
			.pwdCnt {
				width: 100%;
				height: 160rpx;
			}
			.pwdPayType {
				width: 100%;
				height: 50rpx;
			}
			.pwdInput {
				width: 100%;
				height: 80rpx;
				position: relative;
				top: 0;
				left: 0;
				.pwdInputBg {
					.pwdInputItem {
						width: 78rpx;
						height: 80rpx;
						background-color: #373737;
						border-radius: 8rpx;
						box-sizing: border-box;
					}
				}
				.pwdInputUp {
					position: absolute;
					top: 0;
					left: 0;
					.pwdInputItem {
						width: 78rpx;
						height: 80rpx;
						// background-color: #373737;
						border-radius: 8rpx;
						box-sizing: border-box;
					}
				}
			}
		}
		.pwdBox_set {
			width: 600rpx;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			background-color: #2c2c2c;
			border-radius: 24rpx;
			position: fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			.pwdHeader {
				width: 100%;
				height: 60rpx;
				.pwdHeaderLeft {}
				.pwdHeaderTitle {}
				.pwdHeaderRight {
					color: #8a9bab;
				}
			}
			.pwdCnt {
				width: 100%;
				height: 160rpx;
				.setPwd {
					width: 232rpx;
					height: 72rpx;
					line-height: 72rpx;
					background-color: #55AC6B;
					border-radius: 16rpx;
				}
			}
		}
		.keyBox {
			width: 100%;
			height: 480rpx;
			background-color: #2c2c2c;
			position: fixed;
			bottom: 0;
			left: 0;
			.btnLine {
				.singleBtn {
					width: 33.33%;
					height: 120rpx;
					background-color: #1a1a1a;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-size: 44rpx;
					color: #e2e2e2;
					box-sizing: border-box;
				}
			}
		}
	}
}
.b_r {
	border-right: 2rpx solid #202020;
}
.b_l {
	border-left: 2rpx solid #202020;
}
.b_b {
	border-bottom: 2rpx solid #202020;
}
.allH {
	height: 100%;
}
.halfH {
	height: calc(100vh - 480rpx);
}
</style>
